<template>
  <el-row>
    <el-col :span="22" :offset="1">
      <el-tabs type="border-card" style="line-height: 40px">
        <el-tab-pane label="西/成药信息">
          <div style="float: left">
            <div align="left" style="font-size: 20px;color: purple">基本信息</div>
            <div>
              <div style="float: left;width: 20%;">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">药品编码</div>
                <div>
                  <el-input
                    placeholder="12345678"
                    v-model="input"
                    :disabled="true">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">药品条形码</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">药品通用名</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">拼音码</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">药品分类</div>
                <div>
                  <el-select v-model="drug_class_value" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in drug_class"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">药品规格</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">药品剂型</div>
                <div>
                  <el-select v-model="drug_dosage_form_value" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in drug_dosage_form"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: center;margin-top: 20px;margin-bottom: 20px;height: 20px">OTC药品</div>
                <div style="height: 41px;width: 100%">
                  <template>
                    <el-radio v-model="isOTC" label="1">是</el-radio>
                    <el-radio v-model="isOTC" label="2">否</el-radio>
                  </template>
                </div>
              </div><br>
              <div style="float: left;width: 20%;">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">发票项目</div>
                <div>
                  <el-select v-model="invoice_items_value" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in invoice_items"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">批准文号</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">生产厂家</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: center;margin-top: 20px;margin-bottom: 20px;height: 20px">药品状态</div>
                <div style="height: 40px">
                  <template>
                    <el-radio v-model="drug_status" label="1">启用</el-radio>
                    <el-radio v-model="drug_status" label="2">禁用</el-radio>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div style="float: left;margin-top: 30px;width: 100%">
            <div align="left" style="font-size: 20px;color: purple">包装信息</div>
            <div>
              <div style="float: left;width: 20%;">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">包装单位</div>
                <div>
                  <el-select v-model="packaging_unit_value" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in packaging_unit"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">基本系数</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">基本单位</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">剂量系数</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">剂量单位</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">采购价（元）</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">零售价（元）</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: center;margin-top: 20px;margin-bottom: 20px;height: 20px">允许折零</div>
                <div style="height: 40px">
                  <template>
                    <el-radio v-model="isOTC" label="1">是</el-radio>
                    <el-radio v-model="isOTC" label="2">否</el-radio>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div style="float: left;margin-top: 30px;width: 100%">
            <div align="left" style="font-size: 20px;color: purple">功效说明</div>
            <div>
              <div style="float: left;width: 20%;">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">用法</div>
                <div>
                  <el-select v-model="usage_value" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in usage"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">单次用量</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">频度</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 5%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">天数</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 5%;margin-left: 20px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">总量</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 5%;margin-left: 20px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">单位</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
            </div>
          </div>
          <div style="float: left;margin-top: 30px;width: 100%">
            <div align="left" style="font-size: 20px;color: purple">其他信息</div>
            <div>
              <div style="float: left;width: 20%">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">库存下限</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">库存上限</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">货位号</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">有效期预警</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 43%">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">药品说明</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 43%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">备注</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>


        <!--中药信息-->
        <el-tab-pane label="中药信息">
          <div style="float: left">
            <div align="left" style="font-size: 20px;color: purple">基本信息</div>
            <div>
              <div style="float: left;width: 20%;">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">药品编码</div>
                <div>
                  <el-input
                    placeholder="12345678"
                    v-model="input"
                    :disabled="true">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">药品条形码</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">药品通用名</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">拼音码</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">药品分类</div>
                <div>
                  <el-select v-model="drug_class_value" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in drug_class"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">药品规格</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">药品剂型</div>
                <div>
                  <el-select v-model="drug_dosage_form_value" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in drug_dosage_form"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: center;margin-top: 20px;margin-bottom: 20px;height: 20px">OTC药品</div>
                <div style="height: 41px">
                  <template>
                    <el-radio v-model="isOTC" label="1">是</el-radio>
                    <el-radio v-model="isOTC" label="2">否</el-radio>
                  </template>
                </div>
              </div>
              <div style="float: left;width: 20%;">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">发票项目</div>
                <div>
                  <el-select v-model="invoice_items_value" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in invoice_items"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">批准文号</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">生产厂家</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: center;margin-top: 20px;margin-bottom: 20px;height: 20px">药品状态</div>
                <div style="height: 40px">
                  <template>
                    <el-radio v-model="drug_status" label="1">启用</el-radio>
                    <el-radio v-model="drug_status" label="2">禁用</el-radio>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div style="float: left;margin-top: 30px;width: 100%">
            <div align="left" style="font-size: 20px;color: purple">包装信息</div>
            <div>
              <div style="float: left;width: 20%;">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">包装单位</div>
                <div>
                  <el-select v-model="packaging_unit_value" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in packaging_unit"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">采购价（元）</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">零售价（元）</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: center;margin-top: 20px;margin-bottom: 20px;height: 20px">允许折零</div>
                <div style="height: 40px">
                  <template>
                    <el-radio v-model="isOTC" label="1">是</el-radio>
                    <el-radio v-model="isOTC" label="2">否</el-radio>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div style="float: left;margin-top: 30px;width: 100%">
            <div align="left" style="font-size: 20px;color: purple">功效说明</div>
            <div>
              <div style="float: left;width: 20%;">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">用法</div>
                <div>
                  <el-select v-model="usage_value" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in usage"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">单次用量</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">频度</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
            </div>
          </div>
          <div style="float: left;margin-top: 30px;width: 100%">
            <div align="left" style="font-size: 20px;color: purple">其他信息</div>
            <div>
              <div style="float: left;width: 20%">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">库存下限</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">库存上限</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">货位号</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 20%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">有效期预警</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 43%">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">药品说明</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
              <div style="float: left;width: 43%;margin-left: 50px">
                <div style="text-align: left;margin-top: 20px;margin-bottom: 20px;height: 20px">备注</div>
                <div>
                  <el-input
                    placeholder=""
                    v-model="input"
                    :disabled="false">
                  </el-input>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>


        <!--保存按钮-->
        <div style="width: 100%;float: right" >
          <el-button type="primary" plain style="margin-left: 1000px;margin-top: 50px" @click="insertOne()">保存</el-button>
          <el-button type="primary" plain style="" @click="returnto()">返回</el-button>
        </div>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
  import axios from 'axios';
  export default {
    data() {
      return {
        input: '',
        //药品分类
        drug_class: [{
          value: '1',
          label: '注射类'
        }, {
          value: '2',
          label: '消炎类'
        }, {
          value: '3',
          label: '西药'
        }],
        drug_class_value: '',
        //药品剂型
        drug_dosage_form: [{
          value: '1',
          label: '片剂'
        }, {
          value: '2',
          label: '注射液'
        }, {
          value: '3',
          label: '口服液'
        }],
        drug_dosage_form_value: '',
        //OTC
        isOTC:'1',
        //药品状态
        drug_status:'1',
        //发票项目
        invoice_items: [{
          value: '1',
          label: '诊疗费'
        }, {
          value: '2',
          label: '检查费'
        }, {
          value: '3',
          label: '西药费'
        }],
        invoice_items_value:'',
        //包装单位
        packaging_unit:[{
          value: '1',
          label: '盒'
        }, {
          value: '2',
          label: '袋'
        }, {
          value: '3',
          label: '片'
        }],
        packaging_unit_value:'',
        //用法
        usage:[{
          value: '1',
          label: '口服'
        }, {
          value: '2',
          label: '注射'
        }, {
          value: '3',
          label: '皮试'
        }],
        usage_value:'',
      }
    },
    methods:{
      insertOne(){
        alert("层高")
        axios.post("api/druginfo/saveAndUpdate",this.form).then(res=>{
          this.$router.push("/drugInfo")
        })
      },
      returnto(){
        this.$router.push("/drugInfo")
      }
    }
  }
</script>
